<!-- 我的工单 -->
<template>
    <div class="app-container page-content-body">
      <el-form :class="['search-container', isShowSearch ? 'active' : '']" :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="路侧设备编号" prop="code" class="long-label-width">
          <el-input v-model="queryParams.code" @keyup.enter.native="handleQuery" :clearable="true" placeholder="请输入"/>
        </el-form-item>

        <el-form-item label="关联杆件" prop="poleCode" class="middle-label-width">
          <el-input v-model="queryParams.poleCode" @keyup.enter.native="handleQuery" :clearable="true" placeholder="请输入"/>
        </el-form-item>
        
        <div class="lz-margin-bottom-0 lz-margin-left-18 btn-group">
          <el-button class="btn" type="text" size="small" @click="handleToggleSearch" v-if="searchFullHeight > 52">
            {{isShowSearch ? '收起' : '展开'}}
            <i :class="[isShowSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
          </el-button>
          <el-button size="small" type="primary" class="btn" @click="handleQuery">查询</el-button>
        </div>
      </el-form>

      <div class="table-container">
        <div class="table-operation">
          <div class="left-module">
            <el-button class="btn" type="primary" icon="el-icon-plus" @click="handleAdd" size="small" v-hasPermi="[authKeyList.addRoadDevice]">新增</el-button>
            <el-button class="btn" plain type="primary" icon="el-icon-upload2" @click="handleShowBatchImport" size="small" v-hasPermi="[authKeyList.addRoadDevice]">批量导入</el-button>
          </div>
          <div class="right-module">
            <el-button class="btn btn-icon" icon="el-icon-refresh" @click="handleRefresh"></el-button>
          </div>
        </div>
        <el-table 
            v-loading="loading" 
            :data="roadDeviceList" 
            @select="handleSelect" 
            @selection-change="handleSelectionChange" 
            @select-all="handleSelect" 
            :height="`calc(100vh - 238px - ${currentSearchHeight}px)`"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="设备ID" prop="mecId" />
          <el-table-column label="设备名称" prop="name">
            <template slot-scope="scope">
              {{ scope.row.name ? scope.row.name : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="设备类型" prop="type">
            <template slot-scope="scope">
              {{ getLabelInfoByValue(scope.row.type, 'roadDeviceType').label }}
            </template>
          </el-table-column>
          <el-table-column label="所属组织" prop="orgName">
            <template slot-scope="scope">
              {{ scope.row.orgName ? scope.row.orgName : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="关联杆件编号" prop="poleCode">
            <template slot-scope="scope">
              {{ scope.row.poleCode ? scope.row.poleCode : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="关联系统编号" prop="systemCode">
            <template slot-scope="scope">
              {{ scope.row.systemCode ? scope.row.systemCode : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="设备状态" prop="status">
            <template slot-scope="scope">
              {{ getLabelInfoByValue(scope.row.status, 'deviceStatus').label }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="160">
            <template slot-scope="scope">
              {{ scope.row.createTime ? scope.row.createTime : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140" class-name="fixed-width">
            <template slot-scope="scope">
              <div class="table-btn-group">
                <el-button size="mini" type="text" @click="handleViewDetail(scope.row)" v-hasPermi="[authKeyList.viewRoadDevice]">查看</el-button>
                <el-button size="mini" type="text" @click="handleEdit(scope.row)" v-hasPermi="[authKeyList.editRoadDevice]">编辑</el-button>
                <el-button size="mini" type="text" @click="handleDelete(scope.row)" v-hasPermi="[authKeyList.deleteRoadDevice]">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-bottom">
          <div class="batch-operation">
            <span class="base-info">已选{{ selectedList.length }}条|批量操作</span>
            <el-button type="primary" plain @click="handleDeleteAll" :disabled="selectedList.length <= 0" v-hasPermi="[authKeyList.deleteRoadDevice]">删除</el-button>
            <el-button type="primary" plain @click="handleBatchExport" :disabled="selectedList.length <= 0" v-hasPermi="[authKeyList.viewRoadDevice]">导出</el-button>
          </div>
          <pagination align="right" layout="total, sizes, prev, pager, next" v-show="total > 0" :total="total"
          :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" next-text="下一页"
          prev-text="上一页" />
        </div>
      </div>

      <!-- 批量导入弹窗 -->
      <import-dialog 
        v-if="isShowBatchImport"
        @batchFinished="handleFinishImport"
        @closeDialog="handleCloseBatchImport"
        :downloadLink="'/roadDevice/excel/template'"
        :uploadLoadLink="'/roadDevice/import/excel'"
        mainText="路侧设备"
      />
    </div>
  </template>
  <!--vue -->
  <script>
  import importDialog from "@/views/components/importDialog/importDialog.vue";
  import { getRoadDeviceList, deleteRoadDevice } from "@/api/group/myWorkOrder";
  import { ROAD_DEVICE_TYPE, DEVICE_STATUS_ARRAY } from "@/utils/constants";
  export default {
    components: { 
      'import-dialog': importDialog
    },
    dicts: [],
    data() {
      return {
        // 遮罩层
        loading: false,
        // 总条数
        total: 1,
        ids: [],
        idsName: [],
        roadDeviceList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          code: '',
          type: "",
          orgId: '',
          serialNum: '',
          manufacturer: '',
          poleCode: '',
          rdName: "",
          orgName: ''
        },
        deviceStatusList: DEVICE_STATUS_ARRAY,
        deleteButType: true, //删除按钮显示状态
        selectedList: [], //删除多个数组
        testPoint: [],
        sort: "1", //根据时间排序
        testTargetList: [],
        //弹窗
        dialogTitle: '创建设备',
        createForm: {},
        formLabelWidth: '120px',
        rules: {
          code: [
            { required: true, message: "路侧设备号不能为空", trigger: "blur" },
            { validator: this.handleCheckCodeOnly, trigger: "blur" }
          ],
          name: [
            { required: true, message: "路侧设备名称不能为空", trigger: "blur" }
          ],
          type: [
            { required: true, message: "请选择测试路侧类型", trigger: "blur" }
          ]
        },
        rowDetail: {},

        roadDeviceTypeList: ROAD_DEVICE_TYPE,
        //导入导出
        isShowBatchImport: false,

        isShowSearch: true,
        searchFullHeight: 52,
        currentSearchHeight: 52,
      };
    },
    //生命周期函数
    mounted() {
        // this.getList();
        this.handleGetHeight();
    },
    created() {
    },
    //调用方法
    methods: {
      handleGetHeight() {
        this.searchFullHeight = this.$refs.queryForm.$el.offsetHeight;
        this.$nextTick(() => {
          this.isShowSearch = false;
          this.currentSearchHeight = 52;
        })
      },
      handleToggleSearch() {
        this.isShowSearch = !this.isShowSearch;
        this.currentSearchHeight = this.isShowSearch ? this.searchFullHeight : 52;
      },
      //****批量导入/导出 */
      handleShowBatchImport() {
        this.isShowBatchImport = true;
      },
      handleCloseBatchImport() {
        this.isShowBatchImport = false;
      },
      //批量导入弹窗关闭
      handleFinishImport() {
        this.handleCloseBatchImport();
        this.handleRefresh();
      },
      //批量导出
      handleBatchExport() {
        const idStr = this.$_.map(this.selectedList, item => item.id).join(",");
        this.download(`/roadDevice/excel/exportRoadDevice?idStr=${idStr}`, {}, `路侧设备批量文件.xlsx`, {});
      },

      handleViewDetail(row) {
        
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.idsName = selection.map((item) => item.patrolId);
      },
      // 选中设置删除按钮状态
      handleSelect(selection, rows) {
        this.selectedList = selection;
      },
      /** 新增按钮操作 */
      handleAdd() {
        
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$modal.confirm('是否确认删除设备编号为"' + row.code + '"的数据项？').then(function() {
          return deleteRoadDevice({idList: row.id});
        }).then(() => {
          this.handleQuery();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 删除多个按钮操作 */
      handleDeleteAll() {
        const ids = this.$_.map(this.selectedList, item => item.id);
        const str = ids.join(",");
        if (this.selectedList.length <= 0) {
          this.$modal.msgError("请选择要删除的测试设备");
        } else {
          this.$modal.confirm('是否确认删除这' + ids.length + '条数据项？').then(function() {
            return deleteRoadDevice({idList: str});
          }).then(() => {
            this.handleQuery();
            this.selectedList = [];
            this.$modal.msgSuccess("删除成功");
          }).catch(() => {});
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      handleRefresh() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          code: '',
          type: "",
          status: [],
          orgId: '',
          name: "",
          orgName: ''
        };
        this.getList();
      },
      /** 查询任务列表 */
      getList() {
        this.loading = true;
        getRoadDeviceList(this.queryParams).then(res => {
          this.selectedList = [];
          this.loading = false;
          this.roadDeviceList = res?.data?.records;
          this.total = res?.data?.total;
        })
      },
      // 表单重置
      reset() {
        this.createForm = {
          code: '',
          manufacturer: '',
          orgId: '',
          poleId: '',
          serialNum: '',
          type: '',
        };
        this.rowDetail = {};
        this.resetForm("createForm");
      },
      handleEdit(row) {
        
      }
    }
  };
  </script>
